<template>

    <t-form ref="form" :data="formData" :colon="true" :label-width="0" @reset="onReset" @submit="onSubmit" :rules="rules">
        <t-form-item name="account">
            <t-input v-model="formData.account" clearable placeholder="请输入账户名">
            <template #prefix-icon>
                <desktop-icon />
            </template>
            </t-input>
        </t-form-item>
    
        <t-form-item name="password">
            <t-input v-model="formData.password" type="password" clearable placeholder="请输入密码">
            <template #prefix-icon>
                <lock-on-icon />
            </template>
            </t-input>
        </t-form-item>
      
        <t-form-item name="code">
            <t-input v-model="formData.code" clearable>
           >
            </t-input>
        </t-form-item>
          <div class="rem-forget">
            <t-checkbox :default-checked="true"> 记住我 </t-checkbox>
            <span>忘记密码</span>
          </div>
       
        <t-form-item>
            <t-button theme="primary" type="submit" block>登录</t-button>
        </t-form-item>
    </t-form>
    
    </template>
    <style scoped>
      .rem-forget{
        display: flex;
        margin-bottom: var(--td-comp-margin-l);
        justify-content: space-between;
        span{
          color: var(--td-brand-color);
          cursor: pointer;
        }
      }
    </style>
    <script setup>
    import { reactive } from 'vue';
    import { MessagePlugin } from 'tdesign-vue-next';
    import { DesktopIcon, LockOnIcon } from 'tdesign-icons-vue-next';
    import { login } from '@/api/api';
    import { setToken } from '@/utils/common';
    import { useAuthStore } from '@/stores/auth';
    import { useRouter } from 'vue-router';
    const authStore = useAuthStore();
    const router = useRouter();
    const formData = reactive({
      account: '',
      password: '',
      code:''
    });
    
    const onReset = () => {
      MessagePlugin.success('重置成功');
    };
    
    const onSubmit = ({ validateResult, firstError }) => {
      if (validateResult === true) {
        let data = {
          "account":formData.account,
          "password":formData.password,
        }
        login(data).then(res=>{
          if(res.code===200){
            setToken(res.data.token)
            authStore.authInfo.value = res.data.user
            console.log(authStore.authInfo)
            //获取权限
            //系统初始化
            //页面跳转
            router.push("/project")
          }
        })
      } else {
        MessagePlugin.warning(firstError);
      }
    };
    
    const rules = {
      account: [
        { required: true, message: '用户名必填', type: 'error', trigger: 'blur' },
        { required: true, message: '用户名必填', type: 'error', trigger: 'change' },
        { whitespace: true, message: '用户名不能为空' },
      ],
      password: [{ required: true, message: '密码必填', type: 'error' }],}
    </script>